<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title></title>
    <link rel="stylesheet" th:href="@{/asserts/bootstrap4/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/asserts/css/QuestionForm.css}">
</head>
<body>
    <div class="container">
        <div class="questionForm">
            <div class="formTitle">
            </div>
            <div class="formDate">
                <div class="oneDate">
                    <img th:src="@{/asserts/img/startTime.png}" class="oneDate_img">
                    <span>开始时间:</span>
                    <div class="dateTime" id="starttime"></div>
                </div>
                <div class="oneDate">
                    <img th:src="@{/asserts/img/finishTime.png}" class="oneDate_img">
                    <span>截至时间:</span>
                    <div class="dateTime" id="finishtime"></div>
                </div>
                <div class="clear"></div>
            </div>
            <div class="person_msg">
                <div class="message">
                    <span>学号:</span>
                    <input type="text" class="form-control message_input" id="username" autocomplete="off">
                </div>
                <div class="message">
                    <span>姓名:</span>
                    <input type="text" class="form-control message_input" id="password" autocomplete="off">
                </div>
            </div>
            <hr/>
            <div class="content">

            </div>
            <div class="btnArea">
                <button class="btn btn-success" id="submit">提交</button>
            </div>

            <!--题目模板-->
            <div class="content_model">
                <!--单选-->
                <div class="Component oneChoose">
                    <div class="num_title">
                        <span class="com_num"></span>
                        <span class="com_title"></span>
                        <span class="com_type">(单选题)</span>
                    </div>
                    <div class="com_options">
                        <div class="clear"></div>
                    </div>
                </div>

                <!--多选-->
                <div class="Component moreChoose">
                    <div class="num_title">
                        <span class="com_num"></span>
                        <span class="com_title"></span>
                        <span class="com_type">(多选题)</span>
                    </div>
                    <div class="com_options">
                        <div class="clear"></div>
                    </div>
                </div>

                <!--单行文本-->
                <div class="Component oneLineText">
                    <div class="num_title">
                        <span class="com_num"></span>
                        <span class="com_title"></span>
                        <span class="com_type">(单行)</span>
                    </div>
                    <div class="com_content">
                        <input type="text" class="form-control oneLine-control">
                    </div>
                </div>

                <!--多行文本-->
                <div class="Component moreLineText">
                    <div class="num_title">
                        <span class="com_num"></span>
                        <span class="com_title"></span>
                        <span class="com_type">(多行)</span>
                    </div>
                    <div class="com_content">
                        <textarea rows="3" class="form-control moreLine-control"></textarea>
                    </div>
                </div>

                <!--人员推荐-->
                <div class="Component recommendPerson">
                    <div class="num_title">
                        <span class="com_num"></span>
                        <span class="com_title"></span>
                        <span class="com_type">(人员推荐)</span>
                    </div>
                    <div class="com_content">
                        <input type="text" class="form-control recommend_com person_name" placeholder="姓名">
                        <div class="person_options">

                        </div>

                    </div>
                </div>

                <!--人员推荐选项-->
                <div class="recommendPerson_option">

                </div>

                <!--单选选项-->
                <div class="oneOption oneChoose_option">
                    <span class="option_num">A、</span>
                    <span class="option_text">选项A</span>
                </div>

                <!--多选选项-->
                <div class="oneOption moreChoose_option">
                    <span class="option_num">A、</span>
                    <span class="option_text">选项A</span>
                </div>

            </div>
        </div>
    </div>
</body>
<script th:src="@{/asserts/js/jquery-3.3.1.min.js}"></script>
<script th:src="@{/asserts/js/popper.min.js}"></script>
<script th:src="@{/asserts/bootstrap4/js/bootstrap.js}"></script>
<script th:src="@{/asserts/js/canvas-nest.min.js}"></script>
<script type="text/javascript" th:inline="javascript">
    // 渲染部分
    $(function () {
        var option_code = ["A.","B.","C.","D.","E.","F.","G.","H.","I.","J.","K.","L.","M.","N.","O.","P.","Q.","R.","S.","T.",
            "U.","V.","W.","X.","Y.","Z."];
        var questionForm = [[${data}]];
        var id =questionForm.id;
        var title = questionForm.title;
        var starttime = questionForm.starttime;
        var finishtime = questionForm.finishtime;
        var content = questionForm.content;
        $("title").text(title);
        $(".formTitle").text(title);
        $("#starttime").text(starttime);
        $("#finishtime").text(finishtime);
        for (var i = 0;i < content.length;i ++){
            var type = content[i].type;
            var title_com = content[i].title;
            switch (type) {
                case "oneChoose":
                    var component = $(".content_model").children(".oneChoose").clone(true);
                    component.find(".com_num").text((i+1)+"、");
                    component.find(".com_title").text(title_com);
                    var options = content[i].options;
                    var clear = component.find(".clear");
                    for (var j = 0;j < options.length;j ++){
                        var option = $(".content_model").children(".oneChoose_option").clone(true);
                        option.children(".option_num").text(option_code[j]);
                        option.children(".option_text").text(options[j]);
                        $(clear).before(option);
                    }
                    break;
                case "moreChoose":
                    var component = $(".content_model").children(".moreChoose").clone(true);
                    component.find(".com_num").text((i+1)+"、");
                    component.find(".com_title").text(title_com);
                    var options = content[i].options;
                    var clear = component.find(".clear");
                    for (var j = 0;j < options.length;j ++){
                        var option = $(".content_model").children(".moreChoose_option").clone(true);
                        option.children(".option_num").text(option_code[j]);
                        option.children(".option_text").text(options[j]);
                        $(clear).before(option);
                    }
                    break;
                case "oneLineText":
                    var component = $(".content_model").children(".oneLineText").clone(true);
                    component.find(".com_num").text((i+1)+"、");
                    component.find(".com_title").text(title_com);
                    break;
                case "moreLineText":
                    var component = $(".content_model").children(".moreLineText").clone(true);
                    component.find(".com_num").text((i+1)+"、");
                    component.find(".com_title").text(title_com);
                    break;
                case "recommendPerson":
                    var component = $(".content_model").children(".recommendPerson").clone(true);
                    component.find(".com_num").text((i+1)+"、");
                    component.find(".com_title").text(title_com);
            }
            $(".content").append(component);
        }
    });

    //控制 选择题 人员推荐 选项部分
    $(".oneOption").on({
        click: function () {
            change_OptionStyle($(this));
        },
        "touch": function() {
            change_OptionStyle($(this));
        }

    });
    $(".recommendPerson_option").on({
        click: function () {
            change_OptionStyle($(this));
        },
        "touch": function() {
            change_OptionStyle($(this));
        }
    });
    function change_OptionStyle($this){
        var type = $this.parents(".Component").attr("class");
        if (type === "Component oneChoose") {
            var options = $this.parent().children(".oneOption");
            for (var i = 0; i < options.length; i++) {
                $(options[i]).attr("class", "oneOption oneChoose_option");
            }
            $this.attr("class", "oneOption oneChoose_option option_click");
        } else if (type === "Component moreChoose") {
            var ischoose = $this.attr("class");
            if (ischoose === "oneOption moreChoose_option option_click") {
                $this.attr("class", "oneOption moreChoose_option")
            } else {
                $this.attr("class", "oneOption moreChoose_option option_click")
            }
        } else if (type === "Component recommendPerson"){
            var options = $this.parent().children(".recommendPerson_option");
            for (var i = 0; i < options.length; i++) {
                $(options[i]).attr("class", "recommendPerson_option");
            }
            $this.attr("class", "recommendPerson_option recommendPerson_option_checked");
            var input = $this.parents(".com_content").children("input");
            input.val($this.text().split("-")[2]);
        }
    }


    //人员推荐部分，实时同步显示推荐人员信息，提供选择，避免重名
    $(".person_name").on("input propertychange",function () {
        var person_name = $(this).val();
        var $this = $(this);
        if (person_name.length >= 2){
            $.ajax({
                type:"POST",
                async:false,
                url:"/QuestionForm/getPerson",
                contentType:"application/json",
                dataType:"json",
                data:JSON.stringify({
                    name:person_name
                }),
                beforeSend(xml){

                },
                success:function (data) {
                    if (data.code === 200){
                        var person_list = data.data;
                        $this.parent().find(".person_options").empty();
                        for (var i = 0;i<person_list.length;i ++){
                            var person_msg = person_list[i].major_name+"-"+
                                person_list[i].stu_id+"-"+person_list[i].stu_name;
                            var person_option = $(".content_model").children(".recommendPerson_option").clone(true);
                            person_option.text(person_msg);
                            var option_area = $this.parent().find(".person_options");
                            $(option_area).append(person_option);
                        }
                    }else{
                        var msg = data.msg;
                        $this.parent().find(".person_options").empty();
                        $this.parent().find(".person_options").text(msg);
                    }
                },
                error:function (err) {
                    alert(err.toString());
                }
            })
        } else {
            $this.parent().find(".person_options").text("没有找到任何人~");
        }
    });

    //获得需要提交的数据，并构造json
    function getdata(){
        var data = {};
        var Formid = [[${data.id}]];
        var username = $("#username").val().trim();
        var password = $("#password").val().trim();
        if (username === "" || password === ""){
            alert("用户名或密码未输入！");
            return null;
        }
        data.id = Formid;
        data.username = username;
        data.password = password;
        var questions = $(".content").children(".Component");
        data.content = [];
        for(var i = 0;i < questions.length;i ++){
            var one_question = {};
            var type = $(questions[i]).attr("class").split(" ")[1];
            one_question.type = type;
            switch (type) {
                case "oneChoose":
                    var content = $(questions[i]).children(".com_options");
                    var options = $(content[0]).find(".oneOption");
                    for(var j = 0;j < options.length;j++){
                        if ($(options[j]).attr("class") === "oneOption "+type+"_option option_click"){
                            one_question.answer = j;
                            break;
                        }
                    }
                    if (one_question.answer === undefined){
                        alert("第"+(i+1)+"题未选择选项！");
                        return null;
                    }
                    data.content.push(one_question);
                    break;
                case "moreChoose":
                    one_question.answer = [];
                    var content = $(questions[i]).children(".com_options");
                    var options = $(content[0]).find(".oneOption");
                    for(var j = 0;j < options.length;j ++){
                        if ($(options[j]).attr("class") === "oneOption "+type+"_option option_click"){
                            one_question.answer.push(j);
                        }
                    }
                    if (one_question.answer.length === 0){
                        alert("第"+(i+1)+"题未选择选项！");
                        return null;
                    }
                    data.content.push(one_question);
                    break;
                case "oneLineText":
                case "moreLineText":
                    var content = $(questions[i]).children(".com_content");
                    one_question.answer = $($(content[0]).find(".form-control")[0]).val().trim();
                    if (one_question.answer === ""){
                        alert("第"+(i+1)+"题未填写！");
                        return null;
                    }
                    data.content.push(one_question);
                    break;
                case "recommendPerson":
                    var content = $(questions[i]).children(".com_content");
                    var recommendPer_Name = content.find(".person_name").val().trim();
                    var person_options = content.find(".recommendPerson_option");
                    var checked_option = null;
                    if (recommendPer_Name === ""){
                        alert("第"+(i+1)+"题人员推荐，姓名未填写！");
                        return null;
                    } else if (person_options.length === 0){
                        alert("第"+(i+1)+"题人员推荐，未找到任何人！");
                        return null;
                    } else {
                        for (var j = 0;j<person_options.length;j ++){
                            var person = $(person_options[j]).attr("class");
                            if (person === "recommendPerson_option recommendPerson_option_checked"){
                                checked_option = $(person_options[j]).text().split("-");
                            }
                        }
                        if (checked_option === null){
                            alert("第"+(i+1)+"题人员推荐,未选择任何人！");
                            return null;
                        }
                    }
                    one_question.answer = checked_option;
                    data.content.push(one_question);
                    break;
            }
        }
        console.log(data);
        return data;
    }
    $("#submit").click(function () {
        var data = getdata();
        $.ajax({
            type:"POST",
            url:"/QuestionForm/submit",
            contentType:"application/json",
            dataType:"json",
            data:JSON.stringify(data),
            beforeSend(xml){
                if (!data) {
                    return false;
                }
            },
            success:function (data) {
                if (data.code === 200){
                    alert("提交成功！感谢你的填写！");
                    window.location.reload();
                }else{
                    alert(data.msg);
                }
            },
            error:function (err) {
                alert(err.toString());
            }
        })
    });

</script>
</html>